<template>
  <div id="index" ref="appRef">
    <div class="bg">

      <div class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
            <div class="title">
              <span class="title-text">{{ title }}</span>
              <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
            </div>
            <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColors" />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b">数据监控</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao">
              <span class="text fw-b">政务办理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao2">
              <span class="text fw-b">事项办理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao3">
              <span class="text fw-b">诉求治理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao4">
              <span class="text fw-b">调节分析</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao5">
              <span class="text fw-b">新媒体监管</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao6">
              <span class="text fw-b">新媒体监管11</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao7">
              <span class="text fw-b">服务大厅</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao8">
              <span class="text fw-b">服务办件</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao9">
              <span class="text fw-b">交易政务</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao10">
              <span class="text fw-b">服务办理</span>
            </div>
            <div class="react-right bg-color-blue mr-3" @click="tiao11">
              <span class="text fw-b">督查考核</span>
            </div>
          </div>
        </div>

        <div class="body-box">

          <!-- <router-view></router-view> -->
          <!-- 第三行数据 -->



          <div class="content-box">
            <!-- 左边 -->
            <div style="width: 500px; height: 950px;  ">
              <!-- 左边1 -->
              <div>
                <dv-border-box-13 style="width: 500px; height: 300px;margin-bottom: 10px;">
                  <div class="business-statistics-panel">
                    <!-- 面板标题 -->
                    <div class="panel-header">
                      <i class="header-icon"></i>
                      <h3 class="panel-title">业务量统计</h3>
                    </div>

                    <!-- 今日数据 -->
                    <div class="stat-item">
                      <span class="stat-label">今日</span>
                      <div class="people-icons">
                        <i class="person-icon blue" v-for="i in 6" :key="'today-' + i"></i>
                        <i class="person-icon blue-dark" v-for="i in 3" :key="'today-dark-' + i"></i>
                      </div>
                      <!-- <span class="stat-value blue-text">{{ todayValue }}</span> -->
                    </div>

                    <!-- 本周数据 -->
                    <div class="stat-item">
                      <span class="stat-label">本周</span>
                      <div class="people-icons">
                        <i class="person-icon yellow" v-for="i in 4" :key="'week-' + i"></i>
                        <i class="person-icon yellow-dark" v-for="i in 5" :key="'week-dark-' + i"></i>
                      </div>
                      <!-- <span class="stat-value yellow-text">{{ weekValue }}</span> -->
                    </div>

                    <!-- 本月数据 -->
                    <div class="stat-item">
                      <span class="stat-label">本月</span>
                      <div class="people-icons">
                        <i class="person-icon green" v-for="i in 3" :key="'month-' + i"></i>
                        <i class="person-icon green-dark" v-for="i in 6" :key="'month-dark-' + i"></i>
                      </div>
                      <!-- <span class="stat-value green-text">{{ monthValue }}</span> -->
                    </div>

                    <!-- 底部装饰 -->
                    <div class="panel-footer"></div>
                  </div>
                </dv-border-box-13>

              </div>
              <!-- 左边2 -->
              <div>
                <dv-border-box-13 style="width: 500px; height: 300px;margin-bottom: 10px;">
                  <div class="focus-control-panel">
                    <!-- 面板标题区域 -->
                    <div class="focus-header">
                      <i class="focus-header-icon"></i>
                      <h3 class="focus-title">重点管控</h3>
                    </div>

                    <!-- 业务总量卡片区域 -->
                    <div class="focus-business-grid">
                      <div class="focus-business-card focus-card-type1">
                        <div class="focus-card-title">A业务总量</div>
                        <div class="focus-card-value">3000</div>
                        <div class="focus-card-rate">+7.9%</div>
                      </div>
                      <div class="focus-business-card focus-card-type2">
                        <div class="focus-card-title">B业务总量</div>
                        <div class="focus-card-value">3000</div>
                        <div class="focus-card-rate">+0.6%</div>
                      </div>
                      <div class="focus-business-card focus-card-type3">
                        <div class="focus-card-title">C业务总量</div>
                        <div class="focus-card-value">3000</div>
                        <div class="focus-card-rate">+5.5%</div>
                      </div>
                      <div class="focus-business-card focus-card-type4">
                        <div class="focus-card-title">D业务总量</div>
                        <div class="focus-card-value">3000</div>
                        <div class="focus-card-rate">+1.6%</div>
                      </div>
                    </div>

                    <!-- 业务数据与图表区域 -->
                    <div class="focus-stats-container">
                      <!-- 左侧上方业务A -->
                      <div class="focus-stat-item focus-pos-top-left">
                        <span class="focus-stat-label">业务数量A</span>
                        <div class="focus-stat-info">
                          <span class="focus-stat-num focus-color1">3000</span>
                          <span class="focus-stat-percent focus-color1">+7.9%</span>
                        </div>
                        <div class="focus-stat-line focus-line1"></div>
                      </div>

                      <!-- 右侧上方业务B -->
                      <div class="focus-stat-item focus-pos-top-right">
                        <div class="focus-stat-line focus-line2"></div>
                        <span class="focus-stat-label">业务数量B</span>
                        <div class="focus-stat-info">
                          <span class="focus-stat-num focus-color2">3000</span>
                          <span class="focus-stat-percent focus-color2">+7.9%</span>
                        </div>

                      </div>

                      <!-- 左侧下方业务C -->
                      <div class="focus-stat-item focus-pos-bottom-left">
                        <span class="focus-stat-label">业务数量C</span>
                        <div class="focus-stat-info">
                          <span class="focus-stat-num focus-color3">3000</span>
                          <span class="focus-stat-percent focus-color3">+7.9%</span>
                        </div>
                        <div class="focus-stat-line focus-line3"></div>
                      </div>

                      <!-- 右侧下方业务D -->
                      <div class="focus-stat-item focus-pos-bottom-right">
                        <div class="focus-stat-line focus-line4"></div>
                        <span class="focus-stat-label">业务数量D</span>
                        <div class="focus-stat-info">
                          <span class="focus-stat-num focus-color4">3000</span>
                          <span class="focus-stat-percent focus-color4">+7.9%</span>
                        </div>

                      </div>

                      <!-- 中心环形图表 -->
                      <div class="focus-center-chart">
                        <div id="main" class="focus-chart-canvas"></div>
                        <div class="focus-chart-text">
                          <div>数据监控</div>
                          <div>情况</div>
                        </div>
                      </div>
                    </div>

                    <!-- 底部装饰条 -->
                    <div class="focus-footer-bar"></div>
                  </div>
                </dv-border-box-13>
              </div>
              <!-- 左边3 -->
              <div>
                <dv-border-box-13 style="width: 500px; height: 300px;">
                  <div class="analysis-container">
                    <!-- 面板主体 -->
                    <div class="analysis-panel">
                      <!-- 标题区域 -->
                      <div class="analysis-header">
                        <i class="analysis-header-icon"></i>
                        <h3 class="analysis-title">占比分析</h3>
                      </div>

                      <!-- ECharts图表容器 -->
                      <div id="aaa" class="analysis-chart" style="width: 500px;height: 280px;"></div>


                    </div>
                  </div>
                </dv-border-box-13>
              </div>

            </div>

            <!-- 中间 -->
            <div style="width: 840px;height: 950px; margin-left: 20px;">
              <!--中间1  -->
              <div>
                <dv-border-box-12 style="width: 840px; height: 600px;margin-top: 10px;">
                  <Gaode />
                </dv-border-box-12>
              </div>

              <!-- 中间2 -->
              <div>
                <dv-border-box-13 style="width: 840px; height: 300px;margin-top: 10px;">
                  <div class="region-grid-container">
                    <!-- 面板主体 -->
                    <div class="region-grid-panel">
                      <!-- 标题区域 -->
                      <div class="region-grid-header">
                        <i class="region-grid-icon"></i>
                        <h3 class="region-grid-title">区域网格建设</h3>
                      </div>

                      <!-- 内容区域 -->
                      <div class="region-grid-content">
                        <!-- 左侧业务类型环形图 -->
                        <div class="region-left-panel">
                          <div id="eee" class="region-ring-chart"></div>

                          <!-- 图例 -->
                          <!-- <div class="region-legend-list">
            <div class="region-legend-item" v-for="(item, index) in legendData" :key="index">
              <div class="region-legend-color" :style="{ backgroundColor: item.color }"></div>
              <span class="region-legend-text">{{ item.name }}</span>
            </div>
          </div> -->
                        </div>

                        <!-- 右侧数据指标区 -->
                        <div class="region-right-panel">
                          <!-- 顶部销售数据卡片 -->
                          <div class="region-sales-cards">
                            <div class="region-sales-card">
                              <div class="region-card-label">年计划销售量</div>
                              <div class="region-card-value">10,000万元</div>
                            </div>
                            <div class="region-sales-card">
                              <div class="region-card-label">年累计销售量</div>
                              <div class="region-card-value">9,870万元</div>
                            </div>
                            <div class="region-sales-card region-card-highlight">
                              <div class="region-card-label">完成情况</div>
                              <div class="region-card-value">98.7%</div>
                            </div>
                          </div>

                          <!-- 底部环形进度指标 -->
                          <div class="region-metric-rings">
                            <div class="region-metric-item" v-for="(metric, index) in metricData" :key="index">
                              <div id="fff" class="region-metric-chart"></div>
                              <div class="region-metric-label">{{ metric.label }}</div>
                              <div class="region-metric-rate" :class="metric.rateClass">{{ metric.rate }}</div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 底部装饰 -->
                      <div class="region-grid-footer"></div>
                    </div>
                  </div>
                </dv-border-box-13>
              </div>


            </div>
            <!-- 右边 -->
            <div style="width: 500px; height: 950px; margin-left: 20px;">
              <!-- 右边1 -->
              <div>
                <dv-border-box-13 style="width: 500px; height: 300px;margin-top: 10px;">
                  <div class="analysis-container">
                    <!-- 面板主体 -->
                    <div class="analysis-panel">
                      <!-- 标题区域 -->
                      <div class="analysis-header">
                        <i class="analysis-header-icon"></i>
                        <h3 class="analysis-title">数据统计</h3>
                      </div>

                      <!-- ECharts图表容器 -->
                      <div id="ccc" class="analysis-chart" style="width: 500px;height: 280px;"></div>


                    </div>
                  </div>
                </dv-border-box-13>
              </div>
              <!-- 右边2 -->
              <div>
                <dv-border-box-13 style="width: 500px; height: 300px;margin-top: 10px;">
                  <div class="analysis-container">
                    <!-- 面板主体 -->
                    <div class="analysis-panel">
                      <!-- 标题区域 -->
                      <div class="analysis-header">
                        <i class="analysis-header-icon"></i>
                        <h3 class="analysis-title">风险提醒</h3>
                      </div>

                      <!-- ECharts图表容器 -->
                      <div id="ddd" class="analysis-chart" style="width: 500px;height: 280px;"></div>


                    </div>
                  </div>
                </dv-border-box-13>
              </div>
              <!-- 右边3 -->
              <div>
                <dv-border-box-13 style="width: 500px; height: 300px;margin-top: 10px;">
                  <div class="analysis-container">
                    <!-- 面板主体 -->
                    <div class="analysis-panel">
                      <!-- 标题区域 -->
                      <div class="analysis-header">
                        <i class="analysis-header-icon"></i>
                        <h3 class="analysis-title">咨询情况</h3>
                      </div>

                      <!-- ECharts图表容器 -->
                      <!-- <div id="ddd" class="analysis-chart" style="width: 500px;height: 280px;"></div> -->
                      <div class="tag-cloud-container">
                        <div class="tag-item tag-primary">产业数据</div>
                        <div class="tag-item tag-secondary">技术保护</div>
                        <div class="tag-item tag-secondary">创意产业</div>
                        <div class="tag-item tag-secondary">产权争议</div>
                        <div class="tag-item tag-secondary">产权争议</div>
                        <div class="tag-item tag-tertiary">密码重置</div>
                        <div class="tag-item tag-tertiary">智能客服</div>
                        <div class="tag-item tag-tertiary">国际合作</div>
                        <div class="tag-item tag-tertiary">业务情况</div>
                      </div>

                    </div>
                  </div>
                </dv-border-box-13>
              </div>
            </div>

          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts';
import Gaode from "./gaode.vue"


export default defineComponent({
  components: {
    Gaode
  },
  setup() {
    // 左边1的数据
    const todayValue = ref(2336);
    const weekValue = ref(8293);
    const monthValue = ref(31553);

    // 左边2的数据
    // 初始化环形图表
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    const initRingChart = () => {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      const option = {
        backgroundColor: 'transparent',
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#0a1929',
              borderWidth: 2
            },
            label: { show: false },
            labelLine: { show: false },
            data: [
              { value: 25, itemStyle: { color: '#af3a67' } },  // 蓝色
              { value: 25, itemStyle: { color: '#04bb8c' } },  // 黄色
              { value: 25, itemStyle: { color: '#9fb23a' } },  // 绿色
              { value: 25, itemStyle: { color: '#0e9cc9' } }   // 青色
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    };

    // 中间2
    // 图表容器引用
    const ringChartRef = ref(null);
    const metricRefs = ref([]);
    // 图表实例
    let ringChartInstance = null;
    const metricChartInstances = ref([]);

    // 图例数据
    const legendData = [
      { name: '服务类', color: '#4ade80', value: 25 },
      { name: '硬件类', color: '#f472b6', value: 18 },
      { name: '软件类', color: '#60a5fa', value: 17 },
      { name: '销售类', color: '#ef4444', value: 10 },
      { name: '零售类', color: '#a855f7', value: 10 },
      { name: '批发类', color: '#fb8500', value: 10 },
      { name: '教育类', color: '#eab308', value: 5 },
      { name: '其他', color: '#94a3b8', value: 5 }
    ];

    // 指标数据
    const metricData = [
      {
        label: '计划户数',
        value: 90,
        unit: '万户',
        rate: '同比+15%',
        rateClass: 'region-rate-green',
        color: '#4ade80',
        max: 100
      },
      {
        label: '完成户数',
        value: 110,
        unit: '万户',
        rate: '同比+10%',
        rateClass: 'region-rate-green',
        color: '#4ade80',
        max: 120
      },
      {
        label: '计划收入',
        value: 100,
        unit: '万元',
        rate: '同比+15%',
        rateClass: 'region-rate-pink',
        color: '#f472b6',
        max: 150
      },
      {
        label: '实际收入',
        value: 130,
        unit: '万元',
        rate: '同比+10%',
        rateClass: 'region-rate-pink',
        color: '#f472b6',
        max: 150
      }
    ];

    // 中间2
    // 初始化业务类型环形图
    const initRingChart2 = () => {
      var chartDom = document.getElementById('eee');
      var myChart = echarts.init(chartDom);
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}%'
        },
        series: [
          {
            name: '业务类型',
            type: 'pie',
            radius: ['45%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#0a1929',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'outside',
              color: '#8fb5c9',
              fontSize: 12,
              formatter: '{c}%'
            },
            labelLine: {
              show: true,
              length: 10,
              length2: 10,
              lineStyle: {
                color: 'rgba(143, 181, 201, 0.5)'
              }
            },
            data: legendData.map(item => ({
              name: item.name,
              value: item.value,
              itemStyle: {
                color: item.color
              }
            }))
          }
        ],
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '45%',
            style: {
              text: '业务类型',
              fill: '#00f0e1',
              fontSize: 16,
              fontWeight: 'bold'
            }
          }
        ]
      };


      option && myChart.setOption(option);

    };

    // 中间2
    // 初始化指标环形图
    const initMetricCharts = () => {
      // metricData.forEach((metric, index) => {
      //   const container = metricRefs.value[index];
      //   if (container) {
      //     // 销毁已有实例
      //     if (metricChartInstances.value[index]) {
      //       metricChartInstances.value[index].dispose();
      //     }

      //     const instance = echarts.init(container);
      //     metricChartInstances.value[index] = instance;

      //     const percent = Math.round((metric.value / metric.max) * 100);

      //     const option = {
      //       backgroundColor: 'transparent',
      //       series: [
      //         {
      //           type: 'gauge',
      //           startAngle: 90,
      //           endAngle: -270,
      //           pointer: {
      //             show: false
      //           },
      //           progress: {
      //             show: true,
      //             overlap: false,
      //             roundCap: true,
      //             clip: false,
      //             itemStyle: {
      //               color: metric.color
      //             }
      //           },
      //           axisLine: {
      //             lineStyle: {
      //               width: 8,
      //               color: [[1, 'rgba(143, 181, 201, 0.1)']]
      //             }
      //           },
      //           splitLine: {
      //             show: false
      //           },
      //           axisTick: {
      //             show: false
      //           },
      //           axisLabel: {
      //             show: false
      //           },
      //           title: {
      //             show: false
      //           },
      //           detail: {
      //             valueAnimation: true,
      //             fontSize: 16,
      //             fontWeight: 'bold',
      //             offsetCenter: [0, 0],
      //             formatter: [`${metric.value}`, `{unit|${metric.unit}}`].join('\n'),
      //             rich: {
      //               unit: {
      //                 fontSize: 12,
      //                 color: '#8fb5c9',
      //                 padding: [5, 0, 0, 0]
      //               }
      //             },
      //             color: metric.color
      //           },
      //           data: [
      //             {
      //               value: percent
      //             }
      //           ]
      //         }
      //       ]
      //     };

      //     instance.setOption(option);
      //   }
      // });

    };

    // * tab切换 颜色背景改变
    const lastChar = location.href.substr(location.href.length - 1)
    const tabColor = ref(lastChar)
    // * 颜色
    const decorationColors = ['#568aea', '#000000']
    // * 加载标识
    const loading = ref<boolean>(true)
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: '',
      dateYear: '',
      dateWeek: ''
    })

    // 生命周期
    onMounted(() => {
      // 左边2的数据
      setTimeout(() => {
        initRingChart();

      }, 500);

      // 左边3
      setTimeout(() => {
        // 左边3的数据
        var chartDom = document.getElementById('aaa');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            textStyle: {
              color: '#ffffff'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              color: '#ffffff'
            },
            backgroundColor: 'rgba(0, 0, 0, 0.7)'
          },
          legend: {
            textStyle: {
              color: '#ffffff'
            }
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLabel: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: ['业务F', '业务E', '业务D', '业务C', '业务B', '业务A'],
            axisLabel: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            }
          },
          series: [
            {
              name: '业务量',
              type: 'bar',
              data: [18203, 23489, 29034, 104970, 131744, 630230],
              itemStyle: {
                color: '#37a2da'
              }
            },
            {
              name: '占比',
              type: 'bar',
              data: [19325, 23438, 31000, 121594, 134141, 681807],
              itemStyle: {
                color: '#67c23a'
              }
            }
          ]
        };

        option && myChart.setOption(option);
      }, 500);

      // 中间1的数据
      setTimeout(() => {
        // 中间1

      }, 500);

      // 右边1
      setTimeout(() => {
        // 右边1
        var chartDom = document.getElementById('ccc');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          xAxis: {
            type: 'category',
            data: ['业务A', '业务B', '业务C', '业务D',],
            axisLabel: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },

          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          series: [
            {
              data: [150, 280, 224, 278,],
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              itemStyle: {
                color: '#37a2da',
                borderColor: '#ffffff',
                borderWidth: 2
              },
              lineStyle: {
                color: '#37a2da',
                width: 3,
                shadowBlur: 10,
                shadowColor: 'rgba(55, 162, 218, 0.8)'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(55, 162, 218, 0.4)'
                  }, {
                    offset: 1, color: 'rgba(55, 162, 218, 0.1)'
                  }]
                }
              }
            },
            {
              data: [200, 200, 280, 218,],
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              itemStyle: {
                color: '#67c23a',
                borderColor: '#ffffff',
                borderWidth: 2
              },
              lineStyle: {
                color: '#67c23a',
                width: 3,
                shadowBlur: 10,
                shadowColor: 'rgba(103, 194, 58, 0.8)'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(103, 194, 58, 0.4)'
                  }, {
                    offset: 1, color: 'rgba(103, 194, 58, 0.1)'
                  }]
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
      }, 500);

      // 右边2
      setTimeout(() => {
        // 右边2
        var chartDom = document.getElementById('ddd');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },

          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', "2019", "2020", "2021", "2022", "2023", "2023"]
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Email',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [120, 1320, 1010, 1340, 900, 230, 210, 250, 1300, 210, 280, 1300, 1900]
            },

            {
              name: 'Search Engine',
              type: 'line',
              stack: 'Total',
              label: {
                show: true,
                position: 'top'
              },
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [820, 932, 901, 934, 1290, 1330, 1320, 1900, 2030, 134, 1890, 2500, 130]
            }
          ]
        };

        option && myChart.setOption(option);
      }, 500);

      // 中间2
      setTimeout(() => {
        // 中间2
        initRingChart2()
        initMetricCharts()

      }, 500);


      cancelLoading()
      handleTime()
      // todo 屏幕适应
      windowDraw()
      calcRate()


    })

    const router = useRouter()
    //路由跳转
    const tiao = () => {
      router.push("/wzh2")
    }

    const tiao2 = () => {
      router.push("/wzh3")
    }

    const tiao3 = () => {
      router.push("/sjk")
    }
    const tiao4 = () => {
      router.push("/sjk1")
    }
    const tiao5 = () => {
      router.push("/sjk2")
    }

    const tiao6 = () => {
      router.push("/mhr1")
    }
    const tiao7 = () => {
      router.push("/mhr2")
    }
    const tiao8 = () => {
      router.push("/mhr3")
    }
    const tiao9 = () => {
      router.push("/st1")
    }
    const tiao10 = () => {
      router.push("/st2")
    }

    const tiao11 = () => {
      router.push("/st3")
    }
    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()


    onUnmounted(() => {
      unWindowDraw()
      clearInterval(timeInfo.setInterval)


    })

    //点击颜色切换  路由跳转
    const tab = (index) => {
      // console.log(index)
      tabColor.value = index
      router.push(`/tab${index}`)
    }

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    }

    // todo 处理时间监听
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date()
        timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
        timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
        timeInfo.dateWeek = WEEK[date.getDay()]
      }, 1000)
    }

    // return
    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      tabColor,
      tab,
      tiao,
      tiao2,
      tiao3,
      tiao4,
      tiao5,
      tiao6,
      tiao7,
      tiao8,
      tiao9,
      tiao10,
      tiao11,
      legendData,
      metricData,
      metricRefs
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

// 业务逻辑统计样式
.business-statistics-panel {
  width: 100%;
  min-width: 300px;
  border-radius: 4px;
  padding: 55px 15px;
  position: relative;
}

/* 面板头部 */
.panel-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-left: 5px;
}



.panel-title {
  color: #00f0e1;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* 统计项样式 */
.stat-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-label {
  color: #8fb5c9;
  font-size: 14px;
  width: 60px;
  padding-right: 10px;
  text-align: right;
}

.people-icons {
  flex: 1;
  display: flex;
  gap: 8px;
  padding: 0 10px;
}

.person-icon {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='30' r='15' fill='%23ffffff'/%3E%3Cpath d='M10 90c0-15 15-25 30-30h20c15 5 30 15 30 30H10z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* 不同颜色的人形图标 */
.blue {
  filter: brightness(0.8) sepia(1) hue-rotate(180deg) saturate(3);
}

.blue-dark {
  filter: brightness(0.4) sepia(1) hue-rotate(180deg) saturate(3);
}

.yellow {
  filter: brightness(0.8) sepia(1) hue-rotate(50deg) saturate(3);
}

.yellow-dark {
  filter: brightness(0.4) sepia(1) hue-rotate(50deg) saturate(3);
}

.green {
  filter: brightness(0.8) sepia(1) hue-rotate(120deg) saturate(3);
}

.green-dark {
  filter: brightness(0.4) sepia(1) hue-rotate(120deg) saturate(3);
}

// 左边2的样式
/* 面板基础样式 */
.focus-control-panel {
  width: 100%;
  padding: 0px 15px;
}

/* 标题区域样式 */
.focus-header {
  margin-bottom: 5px;
  padding-left: 15px;
}

.focus-header-icon {
  width: 20px;
  height: 20px;
  margin-right: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232ecc71'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.focus-title {
  color: #2ecc71;
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}

/* 业务卡片网格 */
.focus-business-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
}

.focus-business-card {
  flex: 1;
  background-color: rgba(14, 38, 63, 0.6);
  border: 1px solid rgba(46, 204, 113, 0.25);
  padding: 12px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

/* 卡片顶部颜色条 */
.focus-business-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

.focus-card-type1::before {
  background-color: #3daee9;
}

.focus-card-type2::before {
  background-color: #f4d03f;
}

.focus-card-type3::before {
  background-color: #58d68d;
}

.focus-card-type4::before {
  background-color: #48c9b0;
}

.focus-card-title {
  color: #aed6f1;
  font-size: 13px;
  margin-bottom: 6px;
}

.focus-card-value {
  color: #ffffff;
  font-size: 19px;
  font-weight: bold;
  margin-bottom: 4px;
}

.focus-card-rate {
  font-size: 12px;
}

.focus-card-type1 .focus-card-rate {
  color: #3daee9;
}

.focus-card-type2 .focus-card-rate {
  color: #f4d03f;
}

.focus-card-type3 .focus-card-rate {
  color: #58d68d;
}

.focus-card-type4 .focus-card-rate {
  color: #48c9b0;
}

/* 统计数据容器 */
.focus-stats-container {
  position: relative;
  height: 120px;
}

/* 统计项样式 */
.focus-stat-item {
  position: absolute;
  display: flex;
  align-items: center;
  width: 42%;
}

.focus-pos-top-left {
  top: 15px;
  left: 0;
}

.focus-pos-top-right {
  top: 15px;
  right: 0;
  justify-content: flex-end;
}

.focus-pos-bottom-left {
  bottom: 15px;
  left: 0;
}

.focus-pos-bottom-right {
  bottom: 15px;
  right: 0;
  justify-content: flex-end;
}

.focus-stat-label {
  color: #aed6f1;
  font-size: 14px;
  white-space: nowrap;
}

.focus-stat-info {
  margin: 0 12px;
  text-align: center;
}

.focus-stat-num {
  font-size: 17px;
  font-weight: bold;
  margin-right: 6px;
}

.focus-stat-percent {
  font-size: 13px;
}

.focus-stat-line {
  height: 2px;
  flex: 1;
  opacity: 0.7;
}

/* 颜色系统 */
.focus-color1 {
  color: #3daee9;
}

.focus-color2 {
  color: #f4d03f;
}

.focus-color3 {
  color: #58d68d;
}

.focus-color4 {
  color: #48c9b0;
}

.focus-line1 {
  background-color: #3daee9;
}

.focus-line2 {
  background-color: #f4d03f;
}

.focus-line3 {
  background-color: #58d68d;
}

.focus-line4 {
  background-color: #48c9b0;
}

/* 中心图表样式 */
.focus-center-chart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
}

.focus-chart-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.focus-chart-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #aed6f1;
  font-size: 13px;
  z-index: 2;
}




// 左边3
// 占比分析
/* 容器样式 */
.analysis-container {
  width: 100%;
  min-width: 600px;
  height: 100%;
  min-height: 450px;
}

/* 面板样式 */
.analysis-panel {
  width: 100%;
  height: 65%;
  border-radius: 4px;
  padding: 0px 10px;
  position: relative;
}

/* 标题区域 */
.analysis-header {
  padding-left: 15px;
}

.analysis-header-icon {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300f0e1'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.analysis-title {
  color: #00f0e1;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.analysis-panel::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.analysis-panel::after {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
}

.analysis-header::before {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px;
}

.analysis-header::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

// 中间1
/* 容器样式 */
.geo-map-container {
  width: 100%;
  height: 100%;
  min-width: 800px;
  min-height: 600px;
}

/* 面板样式 */
.geo-panel {
  width: 100%;
  height: 100%;
  background-color: #0a1929;
  border: 1px solid #00f0e1;
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0, 240, 225, 0.15);
  padding: 15px;
  position: relative;
  box-sizing: border-box;
}

/* 筛选栏样式 */
.geo-filter-bar {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}

.geo-select {
  background-color: rgba(10, 25, 41, 0.8);
  border: 1px solid #00f0e1;
  color: #8fb5c9;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

.geo-select option {
  background-color: #0a1929;
  border: none;
  padding: 5px;
}

/* 地图容器 */
.geo-map {
  width: 100%;
  height: 100%;
}

/* 左侧信息面板 */
.geo-info-panel {
  position: absolute;
  top: 60px;
  left: 20px;
  width: 180px;
  background-color: rgba(10, 25, 41, 0.9);
  border: 1px solid rgba(0, 240, 225, 0.3);
  border-radius: 4px;
  padding: 15px;
  z-index: 10;
}

.geo-location {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 240, 225, 0.2);
}

.geo-location-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300f0e1'%3E%3Cpath d='M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0-6C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.geo-location-text {
  color: #8fb5c9;
  font-size: 14px;
}

.geo-status-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 3px;
  background-color: rgba(15, 35, 55, 0.5);
}

.geo-status-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 10px;
}

.geo-status-normal .geo-status-icon {
  background-color: #00f0e1;
  box-shadow: 0 0 8px rgba(0, 240, 225, 0.6);
}

.geo-status-error .geo-status-icon {
  background-color: #ff4d6d;
  box-shadow: 0 0 8px rgba(255, 77, 109, 0.6);
}

.geo-status-idle .geo-status-icon {
  background-color: #70e000;
  box-shadow: 0 0 8px rgba(112, 224, 0, 0.6);
}

.geo-status-title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 3px;
}

.geo-status-desc {
  color: #8fb5c9;
  font-size: 12px;
}

/* 右侧业务量指标 */
.geo-business-indicators {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 25px;
  z-index: 10;
}

.geo-indicator-item {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(0, 240, 225, 0.5);
  background-color: rgba(10, 25, 41, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.geo-indicator-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -20px;
  width: 15px;
  height: 2px;
  background-color: rgba(0, 240, 225, 0.5);
}

.geo-indicator-label {
  color: #8fb5c9;
  font-size: 12px;
  margin-bottom: 5px;
}

.geo-indicator-value {
  color: #00f0e1;
  font-size: 16px;
  font-weight: bold;
}

/* 底部装饰 */
.geo-panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg,
      transparent 0%,
      #00f0e1 20%,
      #00f0e1 80%,
      transparent 100%);
}

/* 面板边角装饰 */
.geo-panel::before,
.geo-panel::after,
.geo-panel-footer::before,
.geo-panel-footer::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: #00f0e1;
  border-style: solid;
  background-color: #0a1929;
  z-index: 1;
}

.geo-panel::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.geo-panel::after {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
}

.geo-panel-footer::before {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px;
}

.geo-panel-footer::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

// 右边3
// 咨询情况
.tag-cloud-container {
  min-height: 300px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 50px;
  box-sizing: border-box;
}

.tag-item {
  color: #00f0e1;
  font-family: "Microsoft Yahei", sans-serif;
  text-align: center;
}

.tag-primary {
  font-size: 28px;
  font-weight: bold;
}

.tag-secondary {
  font-size: 20px;
}

.tag-tertiary {
  font-size: 16px;
  color: #4cc9f0;
}

// 中间2
// 区域网络建设
/* 容器基础样式 */
.region-grid-container {
  width: 100%;
  min-width: 800px;
  height: 100%;
  min-height: 400px;
}

/* 面板样式 */
.region-grid-panel {
  width: 100%;
  // height: 74%;
  // background-color: #0a1929;
  // border: 1px solid #00f0e1;
  border-radius: 4px;
  // box-shadow: 0 0 15px rgba(0, 240, 225, 0.15);
  padding: 20px 20px;
  // position: relative;
  box-sizing: border-box;
}

/* 标题区域 */
.region-grid-header {
  display: flex;

  padding-left: 5px;

  height: 30px;
}

.region-grid-icon {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300f0e1'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.region-grid-title {
  color: #00f0e1;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

/* 内容区域布局 */
.region-grid-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: calc(100% - 80px);
}

/* 左侧面板 */
.region-left-panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  border: 1px solid rgba(0, 240, 225, 0.2);
  border-radius: 4px;
}

.region-ring-chart {
  width: 100%;
  flex: 1;
  min-height: 200px;
}

.region-legend-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 10px;
}

.region-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.region-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.region-legend-text {
  color: #8fb5c9;
  font-size: 13px;
  line-height: 1;
}

/* 右侧面板 */
.region-right-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  border: 1px solid rgba(0, 240, 225, 0.2);
  border-radius: 4px;
}

/* 销售数据卡片 */
.region-sales-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.region-sales-card {
  background-color: rgba(14, 38, 63, 0.5);
  border: 1px solid rgba(0, 240, 225, 0.3);
  border-radius: 4px;
  padding: 15px 10px;
  text-align: center;
}

.region-card-highlight {
  background-color: rgba(0, 240, 225, 0.15);
  border-color: #00f0e1;
}

.region-card-label {
  color: #8fb5c9;
  font-size: 14px;
  margin-bottom: 8px;
}

.region-card-value {
  color: #00f0e1;
  font-size: 18px;
  font-weight: 600;
}

/* 指标环形图区域 */
.region-metric-rings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.region-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.region-metric-chart {
  width: 100px;
  height: 15px;
}

.region-metric-label {
  color: #8fb5c9;
  font-size: 13px;
}

.region-metric-rate {
  font-size: 12px;
  margin-top: 2px;
}

.region-rate-green {
  color: #4ade80;
}

.region-rate-pink {
  color: #f472b6;
}

/* 底部装饰 */
.region-grid-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg,
      transparent 0%,
      #00f0e1 20%,
      #00f0e1 80%,
      transparent 100%);
}
</style>
